<template>
  <el-row>
    <!--    <el-col :span="10"></el-col>-->
    <el-col :offset="1">
      <el-button type="primary" @click="dialogVisible=true">点击申请返离校</el-button>
    </el-col>
  </el-row>
  <el-row :gutter="10" v-loading="">
    <el-col :span="11">
      <el-card>
        <el-tag type="success">返校信息</el-tag>
        <el-table :data="RData">
          <el-table-column
              prop="date_time"
              label="日期"
              sortable=""
              align="center"
              min-width="160"
          >
          </el-table-column>

          <el-table-column
              label="状态"
              min-width="120"
              align="center"
              filter-placement="bottom-end"
              :filters="[
              { text: '已过期', value: -2 },
              { text: '待审核', value: 0 },
              { text: '审核通过', value: 1 },
              { text: '审核未通过', value: -2 }
            ]"
              :filter-method="stateFilter"
          >
            <template #default="scope">
              <el-popover
                  ref="popover"
                  placement="bottom"
                  title=""
                  width="200"
                  trigger="hover"
              >
                <template #default>
                  <div>
                    <p>方法: {{ transport[scope.row.method].label }}{{ scope.row.train_number }}</p>
                    <p>出发地点: {{ scope.row.place }}</p>
                  </div>
                  <div v-if="scope.row.state === -1">
                    <p>审批时间: {{ scope.row.approval.date_time }}</p>
                    <p>审批意见: {{ scope.row.approval.suggestion }}</p>
                  </div>
                </template>
                <template #reference>
                  <span>
                    <el-tag type="info" v-if="scope.row.state === -1">审核未通过</el-tag>
                    <el-tag type="warning" v-if="scope.row.state === 0">待审核</el-tag>
                    <el-tag type="success" v-if="scope.row.state === 1">审核通过</el-tag>
                    <el-tag type="danger" v-if="scope.row.state === -2">已过期</el-tag>
                  </span>
                </template>
              </el-popover>

            </template>
          </el-table-column>
          <el-table-column label="操作" min-width="200">
            <template #default="scope">
              <div v-if="scope.row.state!==-1">
                <el-button
                    size="mini"
                    type="info"
                    @click="cancelApply(scope.$index, scope.row)">取消申请
                </el-button>
              </div>
              <div v-else>
                <el-button
                    size="mini"
                    type="warning"
                    @click="changeRLInfo(scope.$index, scope.row, 0)">修改信息
                </el-button>
                <el-button
                    size="mini"
                    type="danger"
                    @click="del(scope.$index, scope.row)">删除
                </el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </el-col>
    <el-col :span="11" :offset="1">
      <el-card>
        <el-tag>离校信息</el-tag>
        <el-table :data="LData">
          <el-table-column
              prop="date_time"
              label="日期"
              sortable=""
              align="center"
              min-width="160"
          >
          </el-table-column>
          <el-table-column
              label="状态"
              min-width="120"
              align="center"
              filter-placement="bottom-end"
              :filters="[
              { text: '已过期', value: -2 },
              { text: '待审核', value: 0 },
              { text: '审核通过', value: 1 },
              { text: '审核未通过', value: -2 }
            ]"
              :filter-method="stateFilter"
          >
            <template #default="scope">
              <el-popover
                  ref="popover"
                  placement="bottom"
                  title=""
                  width="200"
                  trigger="hover"
              >
                <template #default>
                  <div>
                    <p>方法: {{ transport[scope.row.method].label }}{{ scope.row.train_number }}</p>
                    <p>出发地点: {{ scope.row.place }}</p>
                  </div>
                  <div v-if="scope.row.state === -1">
                    <p>审批时间: {{ scope.row.approval.date_time }}</p>
                    <p>审批意见: {{ scope.row.approval.suggestion }}</p>
                  </div>
                </template>
                <template #reference>
                  <span>
                    <el-tag type="info" v-if="scope.row.state === -1">审核未通过</el-tag>
                    <el-tag type="warning" v-if="scope.row.state === 0">待审核</el-tag>
                    <el-tag type="success" v-if="scope.row.state === 1">审核通过</el-tag>
                    <el-tag type="danger" v-if="scope.row.state === -2">已过期</el-tag>
                  </span>
                </template>
              </el-popover>

            </template>
          </el-table-column>
          <el-table-column label="操作" min-width="200">
            <template #default="scope">
              <div v-if="scope.row.state!==-1">
                <el-button
                    size="mini"
                    type="info"
                    @click="cancelApply(scope.$index, scope.row)">取消申请
                </el-button>
              </div>
              <div v-else>
                <el-button
                    size="mini"
                    type="warning"
                    @click="changeRLInfo(scope.$index, scope.row, 1)">修改信息
                </el-button>
                <el-button
                    size="mini"
                    type="danger"
                    @click="del(scope.$index, scope.row)">删除
                </el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </el-card>

    </el-col>
  </el-row>
  <el-dialog
      v-model="dialogVisible"
      width="50%"
  >
    <!--      :before-close="handleClose"-->
    <el-row>
      <el-col :span="11">
        <div class="grid-content bg-purple">
          <el-button type="primary" class="rlType" @click="returnSchool">返</el-button>
        </div>
      </el-col>
      <el-col :span="2">
      </el-col>
      <el-col :span="11">
        <div class="grid-content bg-purple-light">
          <el-button type="success" class="rlType" @click="leaveSchool">离</el-button>
        </div>
      </el-col>
    </el-row>
  </el-dialog>
  <el-dialog v-model="formDialog"
             :title="isReturn===true?'正在填写返校申请':'正在填写离校申请'"
             width="30%">
    <el-form :model="InfoForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
      <el-form-item label="具体时间" required>
        <el-col :span="11">
          <el-form-item prop="date1">
            <el-date-picker type="date" placeholder="选择日期" v-model="InfoForm.date1" value-format="YYYY-MM-DD"
                            style="width: 100%;"></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col class="line" :span="1" :offset="1"> -</el-col>
        <el-col :span="11">
          <el-form-item prop="date2">
            <el-time-picker placeholder="选择时间" v-model="InfoForm.date2" value-format="hh:mm:ss"
                            style="width: 100%;"></el-time-picker>
          </el-form-item>
        </el-col>
      </el-form-item>

      <el-form-item :label="isReturn===true?'当前位置':'目的地'" prop="place">
        <el-input v-model="InfoForm.place"></el-input>
      </el-form-item>

      <el-form-item label="交通方式" prop="region">
        <el-select v-model="InfoForm.method" placeholder="请选择活动区域">
          <el-option v-for="(item) of transport" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="车次" v-if="InfoForm.method===1" prop="train_number">
        <el-input v-model="InfoForm.train_number"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
import {transport} from "/src/utils/static"
import {rlAdd, getRByStudentId, getLByStudentId, rlChange, del} from "../../network/rlschool";
import {Msg} from "../../utils/pubMethod";

export default {
  name: "rlschool",
  data() {
    return {
      transport: transport,
      dialogVisible: false,
      isReturn: true,
      formDialog: false,
      RData: [],
      LData: [],
      InfoForm: {
        uid:"",
        date1: "",
        date2: "",
        method: 0,
        place: "",
        train_number: "",
        type: "",
        date_time: "",
        state: 0
      },
      rules: {
        date1: [
          {type: 'date', required: true, message: '请选择日期', trigger: 'change'}
        ],
        date2: [
          {required: true, message: '请选择时间', trigger: 'change'}
        ],
        method: [
          {required: true, message: '请选择活动资源', trigger: 'change'}
        ],
        place: [
          {required: true, message: '请选择活动资源', trigger: 'change'}
        ],
        train_number: [
          {required: true, message: '请填写活动形式', trigger: 'blur'}
        ]
      }
    }
  },
  created() {
    this.dataInit()
  },
  methods: {
    dataInit() {
      this.getLByStudentId()
      this.getRByStudentId()
    },
    handleClose(done) {
      done();
      this.$router.go(-1)
    },
    leaveSchool() {
      this.InfoForm.type = 1
      this.isReturn = false
      this.dialogVisible = false
      this.formDialog = true
    },
    returnSchool() {
      this.InfoForm.type = 0
      this.isReturn = true
      this.dialogVisible = false
      this.formDialog = true
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.rlAdd()
        } else {
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    rlAdd() {
      this.InfoForm.date_time = this.InfoForm.date1 + " " + this.InfoForm.date2
      rlAdd(this.InfoForm).then(res => {
        try {
          if (res.code === 200) {
            this.formDialog = false
            this.InfoForm = {
              uid:"",
              date1: "",
              date2: "",
              method: 0,
              place: "",
              train_number: "",
              type: "",
              date_time: "",
              state: 0
            }
            this.dataInit()
            Msg(this.$message, "success", "提交请求")
          } else {
            Msg(this.$message, "error", res.data)
          }
        } catch (e) {
          Msg(this.$message, "error", "出错了")
        }
      }, err => {
      })
    },
    getLByStudentId() {
      getLByStudentId().then(res => {
        try {
          if (res.code === 200) {
            this.LData = res.data
          } else {
            Msg(this.$message, "error", res.data)
          }
        } catch (e) {
          Msg(this.$message, "error", "出错了")
        }
      }, err => {
      })
    },
    getRByStudentId() {
      getRByStudentId().then(res => {
        try {
          if (res.code === 200) {
            this.RData = res.data
          } else {
            Msg(this.$message, "error", res.data)
          }
        } catch (e) {
          Msg(this.$message, "error", "出错了")
        }
      }, err => {
      })
    },
    stateFilter(value, row) {
      return row.state === value;
    },
    cancelApply(index, row) {
      rlChange(row.uid, row).then(res => {
        try {
          if (res.code === 200) {
            this.dataInit()
          } else {
            Msg(this.$message, "error", res.data)
          }
        } catch (e) {
          Msg(this.$message, "error", "出错了")
        }
      }, err => {

      })
    },
    del(index, row) {
      del(row.uid).then(res => {
        try {
          if (res.code === 200) {
            this.dataInit()
          } else {
            Msg(this.$message, "error", res.data)
          }
        } catch (e) {
          Msg(this.$message, "error", "出错了")
        }
      }, err => {

      })
    },
    /***
     *
     * type 为1代表离校，0代表返校
     ***/
    changeRLInfo(index,row,type) {
      this.InfoForm = row
      this.InfoForm.date1 = row.date_time.substr(0,10)
      this.InfoForm.date2 = row.date_time.substr(11,8)
      this.isReturn = true
      this.formDialog = true
    }
  },
  // watch: {
  //   /*每次进入该页面都执行*/
  //   $route(newVal, oldVal) {
  //     this.dialogVisible = true
  //   }
  // }
}
</script>

<style scoped>
.rlType {
  width: 100%;
  height: 0;
  padding-bottom: 60%;
  padding-top: 40%;
  font-size: 100px;

  /*line-height: 100%;*/
}
</style>